<template>
  <div>
    <h1>音乐播放页</h1>
    <div>
      <h2>音乐列表</h2>
      <ul>
        <li v-for="song in songs" :key="song.id">{{ song.title }} - {{ song.artist }}</li>
      </ul>
    </div>
    <div>
      <h2>音乐播放组件</h2>
      <audio :src="currentSong.url" controls></audio>
    </div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();
const id = route.params.id;
console.log(id);
const songs = [
  { id: 1, title: '歌曲1', artist: '歌手1', url: 'https://example.com/song1.mp3' },
  { id: 2, title: '歌曲2', artist: '歌手2', url: 'https://example.com/song2.mp3' },
];

const currentSong = songs[0];
</script>

<style lang="scss" scoped>

</style>